<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- 接收父组件传过来的showArr然后渲染到页面 -->
    <li :class="{completed:item.isDone}" v-for="(item,index) in list" :key="item.id">
      <div class="view">
        <input class="toggle" type="checkbox" @click="change(index)" :checked="item.isDone"/>
        <label>{{item.name}}</label>
        <button class="destroy" @click="des(index)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  props:{
    list:Array
  },
  methods:{
    change(ind){
      this.$emit('change',ind)//自定义改变任务状态的事件，将要删改变对象的下标发给父组件
    },
    des(e){
      this.$emit('des',e)//自定义删除事件，将要删除对象的下标发给父组件
    }
  }
}
</script>